<!-- 
  参考：第289集
 -->
<style>
  .box {
    position: relative;
    width: 240px;
    height: 170px;
    margin: 100px auto;
  }
  .box img {
    width: 100%;
    height: 100%;
  }
  .box::after {
    /* 别漏了content属性 */
    content: "";
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 0, 0, 0.5);
  }
  /* 三连贯 */
  .box:hover::after {
    display: block;
  }
</style>

<!-- 把原先的遮罩标签去掉，由伪元素代替 -->
<div class="box">
  <img src="./img/item.png" alt="" />
</div>
